<template>
  <div style="width:100%; height:100%; background-color: #DAE4E4;padding:50px">
    <!-- <upload-btn @before-upload="beforeUpload"></upload-btn> -->
    <Upload @before-upload="beforeUpload"></Upload>
    Upload
    <!-- <el-upload v-model:file-list="fileList" class="upload-demo"
      action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15" multiple :on-preview="handlePreview"
      :on-remove="handleRemove" :before-remove="beforeRemove" :limit="3" :on-exceed="handleExceed">
      <el-button type="primary">Click to upload</el-button>
      <template #tip>
        <div class="el-upload__tip">
          jpg/png files with a size less than 500KB.
        </div>
      </template>
</el-upload> -->

    <el-input v-model="input" style="width: 240px" placeholder="Please input" />
    <video-ref :video-file-url="videoFileUrl"></video-ref>
  </div>
</template>

<script>

import { createFFmpeg, fetchFile } from '@ffmpeg/ffmpeg';
// import UploadBtn from './video/elUploadBtn.vue';
import videoRef from './video/Video.vue';
import Upload from './video/elUploadBtn.vue';
export default {
  data () {
    return {
      ffmpeg: {},
      videoFileUrl: "",
    }
  },
  components: {
    videoRef,
    // UploadBtn,
    Upload
  },
  computed: {},
  methods: {
    // 页面初始化逻辑
    async init () {

      await this.initFfmpeg()
    },
    // 初始化 ffmpeg 功能
    async initFfmpeg () {
      this.ffmpeg = createFFmpeg({
        // corePath: 'ffmpeg-core.js',
        corePath: 'http://localhost:5173/public/ffmpeg-core.js',
        log: true,
      })
    },
    // 上传文件前的钩子
    async beforeUpload (file) {
      console.log('🚀🚀 beforeUpload ~ file', file);
      await this.ffmpeg.load();
      await this.getVideoFileUrl(file)
    },
    async getVideoFileUrl (file) {
      // 获取资源文件
      const result = await fetchFile(file)
      console.log('🚀🚀 ~ result', result);
      // 对于 ffmpeg.wasm 的输入/输出文件，需要先将它们保存到 MEMFS 以便 ffmpeg.wasm 能够使用它们
      this.ffmpeg.FS('writeFile', `${file.name}`, result);
      await this.ffmpeg.run('-i', `${file.name}`, '-acodec', 'aac', '-vcodec', 'libx264', '-y', `${file.name.split('.')[0]}.mp4`);
      // 在内存中读取文件
      const data = this.ffmpeg.FS('readFile', `${file.name.split('.')[0]}.mp4`);
      // 获取内存中的播放地址
      this.videoFileUrl = URL.createObjectURL(new Blob([data.buffer], { type: 'video/mp4' }))
      console.log('🚀🚀 ~  this.videoFileUrl', this.videoFileUrl);
    }
  },
  async mounted () {
    // console.log('!!!!!');

    // console.log(createFFmpeg, 'createFFmpeg');
    // 页面初始化逻辑
    await this.init()
  }
}
</script>